<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
        .item{
            float:left;
            width: 200px;
             /*height: 40px; */
        }
        .main{
            background-color: aqua;
            border:1px solid #f00;
            overflow: hidden;
        }
        .main2{
            background-color: aqua;
            border:1px solid #f00; 
        }
        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div>为什么是要清除浮动；
        主要是浮动之后会使得父元素的高度塌陷
        下边的div会顶上来；
    </div>
    <div>
        1.clear:both 
        尾部浮动元素增加某位clear：both
    </div>
    <div>
        2.
        父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
            通过触发BFC方式，实现清除浮动
        优点：代码简洁
        缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
        不推荐使用
    </div>
    <div>
        3.使用after伪元素清除浮动（推荐使用)
        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        
    </div>
    <div>
        4.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
    <!--  
    <div class="fahter clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
        </div>
        <div class="footer"></div> -->
    优点：代码更简洁

    缺点：用zoom:1触发hasLayout.
    </div>
    
    <div style="width:600px;" class="main">
        <div class="red item">
            1
        </div>
        <div class="green item">
            2
        </div>
        <div class="blue item">
            3
        </div>
        <!-- <div style="clear: both;"></div> -->
    </div>
    <div style="height: 40px;background-color: black;">

    </div>
    <div style="width:600px;" class="main2 clearfix">
        <div class="red item">
            1
        </div>
        <div class="green item">
            2
        </div>
        <div class="blue item">
            3
        </div>
        <!-- <div style="clear: both;"></div> -->
    </div>
    <div style="height: 40px;background-color: black;">

    </div>
</body>
</html>